<!--
 * @Author: your name
 * @Date: 2021-03-22 08:55:07
 * @LastEditTime: 2021-03-23 15:44:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \training-group-5-warehouse\danshang-admin\src\views\shop\commodityManagement\components\DirlogFunctionality.vue
-->
<!-- 商品管理修改加入回收站共用弹框 -->
<template>
  <div
    class="dirlogFunctionality"
    :class="flag ? 'active' : 'actives'"
    style="
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    "
  >
    <div
      class="box"
      style="
      width: 600px;
      height: 400px;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding:0 20px ;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-direction: column;
      "
    >
      <div
        class="vanish"
        style="
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        "
      >
        <span />
        <span style="cursor: pointer;" @click="handleOnCancel">X</span>
      </div>
      <div class="content" style="flex: 1; width: 100%; overflow-y: scroll;">
        <!-- 加入商品回收站 -->
        <div
          v-if="type === 'addRecycle'"
          class="addRecycle"
          style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;"
        >
          <h2>确定把当前商品加入商品回收站吗!!!</h2>
        </div>
        <div
          v-if="type === 'redact'"
          class="addRecycle"
          style="
          width: 100%;
          height: 100%;
          "
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="商品售价" prop="price">
              <el-input v-model="ruleForm.price" />
            </el-form-item>
            <el-form-item label="销量" prop="volume">
              <el-input v-model="ruleForm.volume" />
            </el-form-item>
            <el-form-item label="库存" prop="repertory">
              <el-input v-model="ruleForm.repertory" />
            </el-form-item>
            <el-form-item label="排序" prop="rank">
              <el-input v-model="ruleForm.rank" />
            </el-form-item>
            <el-form-item label="操作时间" prop="timestamp ">
              <el-input v-model="ruleForm.timestamp" />
            </el-form-item>
          </el-form>
        </div>
        <div
          v-if="type === 'recycle'"
          class="addRecycle"
          style="
          width: 100%;
          height: 100%;
          "
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="商品售价" prop="price">
              <el-input v-model="ruleForm.price" />
            </el-form-item>
            <el-form-item label="销量" prop="volume">
              <el-input v-model="ruleForm.volume" />
            </el-form-item>
            <el-form-item label="库存" prop="repertory">
              <el-input v-model="ruleForm.repertory" />
            </el-form-item>
            <el-form-item label="排序" prop="rank">
              <el-input v-model="ruleForm.rank" />
            </el-form-item>
            <el-form-item label="操作时间" prop="timestamp ">
              <el-input v-model="ruleForm.timestamp" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div
        class="btn"
        style="
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;"
      >
        <span
          style="
          margin: 0 5px;
          width: 70px;
          height: 35px;
          background: tomato;
          color: #fff;
          text-align: center;
          line-height: 35px;
          cursor: pointer;
          "
          @click="handleOnCancel"
          >取消</span
        >
        <span
          style="
          margin: 0 5px;
          width: 70px;
          height: 35px;
          background: cornflowerblue;
          color: #fff;
          text-align: center;
          line-height: 35px;
          cursor: pointer;
          "
          @click="handleOnNotarize"
          >确定</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 显示开关
    flag: {
      type: Boolean,
      default: false,
      required: false
    },
    // 弹框类型
    type: {
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      // 输入框默认数据
      ruleForm: {
        title: "",
        price: "",
        repertory: "",
        volume: "",
        rank: "",
        timestamp: ""
      },
      // 输入框规则
      rules: {
        title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品售价", trigger: "blur" }],
        repertory: [
          { required: true, message: "请输入商品销量", trigger: "blur" }
        ],
        volume: [
          { required: true, message: "请输入商品库存", trigger: "blur" }
        ],
        rank: [{ required: true, message: "请输入商品排序", trigger: "blur" }],
        timestamp: [
          { required: true, message: "请输入商品操作时间", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 显示隐藏监听事件
    handleOnCancel() {
      this.$emit("handleCancel");
    },
    // 监听确定按钮
    handleOnNotarize() {
      if (this.type === "redact") {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            this.$emit("handleNotarize", this.ruleForm);
          } else {
            alert("请输入完整内容");
            return false;
          }
        });
      } else {
        this.$emit("handleNotarize");
      }
    },
    // 默认输入框参数
    handleSetForm(val) {
      val.timestamp = this.timestampToTime(val.timestamp);
      this.ruleForm = val;
    },
    // 时间戳转化日期函数
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>
<style scoped lang="scss">
.dirlogFunctionality.active {
  display: block;
}
.dirlogFunctionality.actives {
  display: none;
}
</style>
